<template>
	<public-view navType="other" navTitle="支付">
		<view class="content">
			<view class="tixian-boxa flex f-d-c">
				<view class="top flex a-i-c w-100 j-c-b">
					<view class="left flex a-i-c">
						<view class="title f-w-b">
							支付
						</view>
						<!-- <view class="f-s-24" style="color:#535353;">
							可提现佣金￥200
						</view> -->
					</view>
					<!-- <view class="right color-2567F3 f-s-24 f-w-b">
						全部提现
					</view> -->
				</view>
				<view class="flex a-i-c">
					<view class="f-s-40 l-h-56" style="color: #E86464;">
						￥
					</view>
					<input class="f-s-24" type="text" v-model="money" placeholder="请输入支付金额" placeholder-style="color:#d0d0d0;"/>
				</view>
			</view>
			<view class="pay-way-box w-100 flex f-d-c">
				<radio-group class="uni-list" @change="radioChange">
					<label class="flex a-i-c w-100 j-c-b" style="margin-bottom: 42rpx;" v-for="(item,index) in pay_way" :key="index">
						<view class="flex a-i-c color-333 f-s-28">
							<image class="pay-way-icon" :src="item.icon" mode=""></image>
							<label class="label-2-text" :for="item.value">
								<text>{{item.name}}</text>
							</label>
						</view>
						<view>
							<radio :value="item.type" :checked="item.checked"></radio>
						</view>
					</label>
				</radio-group>
			</view>
			<bottom-btn btnIndex="2" :positon="false" @click="showCardChoose">支付</bottom-btn>
			<pay-password ref="showpay" @enter="successPayPassword"></pay-password>
		</view>
	</public-view>
</template>

<script>
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	import payPassword from "@/components/myComponents/paypassword.vue"
	import {goTo} from "@/nav.js"
	export default {
		components:{
			"bottom-btn":bottomBtn,
			"pay-password":payPassword
		},
		data() {
			return {
				money:"",
				pay_way: [
					{
						name:"微信支付",
						icon:"/static/images/pay-way/weixin-icon.svg",
						value:'1',
						checked:false,
						type:"wechat",
						valuea:0
					},
					{
						name:"支付宝支付",
						icon:"/static/images/pay-way/alipay-icon.svg",
						value:'2',
						checked:false,
						type:"alipay",
						valuea:0
					},
					{
						name:"余额支付",
						icon:"/static/images/pay-way/yue.svg",
						value:'3',
						checked:false,
						type:"balance",
						valuea:0
					}
				],
				pay_type:"",
				merchant_id:"",
				pay_pass:"",
				is_post:""
			};
		},
		onLoad(o) {
			console.log(o)
			this.merchant_id = o.id
			// #ifdef APP-PLUS
			plus.runtime.arguments=null
			// #endif
			this.$store.state.pay_type_list.map(val=>{
				this.pay_way.forEach(value=>{
					if(val.type === value.type){
						value.valuea = val.value||0
						value.type = val.type,
						value.name = val.name
						value.checked = false
					}
				})
			})
		},
		onShow() {
			let user = uni.getStorageSync("userInfo")||""
			if(!user){
				uni.showModal({
					title:"温馨提示",
					content:"您还未登录，请先登录！",
					confirmText:"去登陆",
					success(res) {
						if(res.confirm){
							goTo({url:"/pages/login/index"})
						}
					}
				})
			}
		},
		methods:{
			radioChange(e){
				console.log(e)
				this.pay_type = e.detail.value
			},
			successPayPassword(e){
				this.pay_pass = e
				this.is_post = ""
				this.showCardChoose(3,true)
			},
			showCardChoose(type="",is_password=false){
				let that = this
				if(that.pay_type === ""){
					uni.showToast({
						title:"请选择支付方式",
						icon:"none"
					})
					return
				}
				if(that.money === ""){
					uni.showToast({
						title:"请输入金额",
						icon:"none"
					})
					return
				}
				if(that.is_post !==""){
					console.log(1)
					return
				}
				that.is_post = '1'
				if(!is_password && that.pay_type === 'balance'){
					if(that.$store.state.userInfo.pay_pass){
						that.$refs.showpay.show()
					}else{
						uni.showModal({
							title:"温馨提示",
							content:"您未设置支付密码",
							confirmText:"去设置",
							success(res){
								if(res.confirm){
									that.goTo({url:"/pages/my/changePayPassword"})
								}
							}
						})
					}
					that.$refs.showpay.show()
					return
				}
				
				that.util.postRequest({
					url:"v1/order/create",
					data:{
						method:"POST",
						type:'1',
						amount:that.money,
						merchant_id:that.merchant_id
					}
				}).then(res=>{
					console.log(res)
					that.$createPay({
						pay_type:that.pay_type,
						pay_pass:that.pay_pass,
						order_ids:[res.data[0].id],
						method:"POST"
					},(pres)=>{
						
						uni.showToast({
							title:"支付成功",
						})
					})
				}).catch(e=>{
					console.log(e)
					that.is_post = ""
					if(e.code === 401){
						uni.showToast({
							title:"请先登录",
							icon:"none"
						})
						goTo({url:"/pages/login/index"})
					}
				})
				// this.$refs.cardList.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-way-box {
		width: 100%;
		padding: 32upx 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		margin-top: 20upx;
		.pay-way-icon{
			width: 48upx;
			height: 48upx;
			margin-right: 22upx;
		}
	}
	.bottom-btn-box{
		margin-top: 30upx;
		.item{
			width: 272upx;
			height: 96upx;
			border-radius: 128upx;
		}
		.btn1{
			border: 2upx solid #979797;
			color: #979797;
			margin-right: 10upx;
		}
		.btn2{
			background: #2567F3;
			color: #FFFFFF;
		}
	}
	.card-list-view{
		width: 750upx;
		background: #FFFFFF;
		border-radius: 40upx 40upx 0px 0px;
		height: 680upx;
		padding: 34upx 24upx;
		.card-scroll-view{
			width: 100%;
			height: 312upx;
			.item{
				width: 100%;
				padding: 32upx 24upx;
				.eyex-icon{
					width: 36upx;
					height: 32upx;
				}
				.card-name{
					width: 496upx;
					margin-right: 38upx;
					.margin-r{
						margin-right: 20upx;
					}
					.name{
						line-height: 40upx;
					}
				}
				.active{
					background: #2567F3;
					
				}
				.unactive{
					border: 2upx solid #9F9F9F;
				}
				.radio{
					margin-right: 26upx;
					border-radius: 50%;
					width: 40upx;
					height: 40upx;
					.duigou{
						width: 24upx;
						height: 16upx;
					}
				}
			}
		}
		.top-add-card{
			padding: 32upx 22upx;
			.left{
				.card-icon{
					width: 52upx;
					height: 48upx;
					margin-right: 22upx;
				}
			}
			.right{
				width: 120upx;
				height: 48upx;
			}
		}
	}
	.l-h-56{
		line-height: 56upx;
		margin-right: 8upx;
	}
	.tixian-boxa{
		width: 100%;
		padding: 32upx 40upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin-bottom: 64upx;
		.bottom{
			
		}
		.top{
			margin-bottom: 20upx;
			.left{
				.title{
					color: #494949;
					line-height: 44upx;
					margin-right: 24upx;
				}
			}
		}
	}
	.content{
		width: 750upx;
		padding: 42upx 24upx;
		
	}
</style>
